<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我负责的</el-menu-item>
      <el-menu-item index="department" v-if="phoneOutboundListMyDept">本部门</el-menu-item>
      <el-menu-item index="" v-if="phoneOutboundListAll">全部</el-menu-item>
    </el-menu>

    <div class="table-container">
      <vxe-grid ref='customerListGrid' v-bind="gridOptions"  size="mini" :loading="listLoading">
        <template #form>
          <!--搜索-->
          <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
            <el-form-item label="呼叫时间：">
              <el-date-picker
                v-model="listQuery.recordTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="呼出结果：">
              <el-select v-model="listQuery.recordResult" placeholder="请选择" clearable>
                <el-option label="成功" :value="1"></el-option>
                <el-option label="失败" :value="0"></el-option>
              </el-select>
            </el-form-item>

             <el-form-item label="业务员：" v-if="listQuery.tab!='my'">
              <el-select v-model="listQuery.userName" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="item in userOptionList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userName">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="联系人电话：" v-if="listQuery.tab=='my'">
              <el-input v-model="listQuery.customerMobile" clearable style="width:200px;"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="handleSearchList()"
                type="primary">
                查询
              </el-button>
              <el-button
                icon="el-icon-phone-outline"
                @click="handleOutbound('')"
                type="success">
                直接外呼
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #customerName_default="{ row, rowIndex }">
          <div style="white-space: normal;">{{row.customerNumber }}</div>
          <!--是否有权限-->
          <div v-if="row.isShowCustomerName" style="white-space: normal;">{{row.customerName}}</div>
        </template>

        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>

        <template #toolbar_buttons>

        </template>

        <template #num1_default="{ row }">
          <!-- 呼出结果 -->
          <div>{{ row.recordResult==true ? '成功':'失败' }}</div>
        </template>

        <template #num2_default="{ row }">
          <!-- 音频 -->
          <div style="margin-bottom: 4px;" v-if="row.hasOwnProperty('localUrl')&&row.localUrl!=''">
            <audio controls style="width: 220px; height: 30px">
              <source :src="row.localUrl" type="audio/mpeg" />
              <source :src="row.localUrl" type="audio/ogg" />
              <source :src="row.localUrl" type="audio/mp3" />
              您的浏览器不支持该音频格式。
            </audio>
            <!-- <AudioPlayer class="audio-box" :fileurl="row.localUrl"></AudioPlayer> -->
          </div>
        </template>

        <template #num4_default="{ row }">
          <el-button
            type="text"
            size="mini"
            @click="handleOutbound(row)">直接外呼
          </el-button>
        </template>
      </vxe-grid>
    </div>

     <!-- 直接外呼 -->
    <outboundCall ref="outboundCallRef"></outboundCall>

  </div>
</template>
<script>
import { getOrderUsersList } from '@/api/partner';
import { getYunTongXinListAPI } from '@/api/fms';
import {formatDate} from '@/utils/date';
import store from '@/store';
import outboundCall from './components/outboundCall.vue';
import AudioPlayer from '@/components/audioPlayer.vue';
import "@/utils/jQuery.print";
import { mapGetters } from 'vuex'
const defaultListQuery={
  tab: 'my',
  recordTime:[],
  userName: '',//业务员
  recordResult: '',
  customerMobile:'',
  pageNum: 1,
  pageSize: 10,
};

export default {
  name: "followDetailsList",
  data(){
    return {
      userOptionList: [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count: 0,
      listLoading: false,
      roles: store.getters.roles ? store.getters.roles : [],
      customerName:'',
      gridOptions:{
        border: true,
        id: 'customerMobile',
        align:'center',
        rowConfig: {
          // keyField: 'customerMobile',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          },
          className:'mytoolbar',
        },
        columns: [
          {
            field: 'userName',
            title: '业务员',
            minWidth: 100,
          },
          {
            field: 'userMobile',
            title: '业务员号码',
            minWidth: 150,
          },
          {
            field: 'customerNumber',
            title: '客户编号',
            minWidth: 150,
            slots: {
              // 使用插槽模板渲染
              default: "customerName_default",
            },
          },
          {
            field: 'customerMobile',
            title: '客户号码',
            minWidth: 150
          },
          {
            field: 'billSeconds',
            title: '通话时长(秒)',
            minWidth: 100,
          },
          {
            field: 'recordTime',
            title: '呼出时间',
            minWidth: 150,
          },
          {
            field: 'recordResult',
            title: '呼出结果',
            minWidth: 100,
            slots: {
              default: 'num1_default',
            },
          },
          {
            field: 'localUrl',
            title: '录音文件',
            minWidth: 300,
            slots: {
              default: 'num2_default',
            },
          },
          {
            field: '',
            title: '操作',
            minWidth: 220,
            fixed:'right',
            slots: {
              default: 'num4_default',
            },
          },
        ],
        data:[],
      },
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    phoneOutboundListMyDept (){
      if(this.roles.indexOf("phoneOutboundListMyDept") != -1){
        return true
      }else{
        return false
      }
    },
    phoneOutboundListAll() {
      if(this.roles.indexOf("phoneOutboundListAll") != -1){
        return true
      }else{
        return false
      }
    }
  },
  created() {
    let now = new Date();
    let today = formatDate(now, "yyyy-MM-dd");
    this.listQuery.recordTime = [today, today];
    this.getList();
    this.getUserOptionListData();
  },
  filters: {
    fifApply(val){
      if(val == 0){
        return '待提交'
      }else if(val == 10){
         return '未审核'
      }else if(val == 20){
        return '审核未通过'
      }
    },
  },
  components : {
    AudioPlayer,
    outboundCall
  },
  mounted() {
  },
  methods: {
    // 直接外呼
    handleOutbound(row) {
      this.$refs.outboundCallRef.showPop(row)
    },

    //获取员工下拉选项
    getUserOptionListData(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },

    handleSelect(key) {
      this.listQuery.userName = '';
      this.listQuery.customerMobile = '';
      this.listQuery.tab = key;
      this.handleSearchList();
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },

    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      this.gridOptions.data = [];
      getYunTongXinListAPI(this.listQuery).then(response => {
        this.gridOptions.data = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
  },
}
</script>
<style scoped>
.imgStyle{
  float: left;
}

</style>



